<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>应聘系统</title>
    <style>
        /* 表格通用样式 */
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            background-color: #f9f9f9;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            border-radius: 8px; /* 圆角 */
        }

        th, td {
            padding: 15px;
            text-align: left;
            border: 1px solid #ddd;
            transition: background-color 0.3s;
        }

        th {
            background-color: #f2f2f2;
            font-weight: bold;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
            position: relative;
        }

        th:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background-color: #005792;
        }

        td {
            background-color: #fff;
        }

        tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        tr:hover {
            background-color: #eaeaea;
        }

        /* 挂号记录表格特定样式 */
        #Companys {
            font-size: 14px; /* 字体大小 */
        }

        #Companys th {
            width: auto; /* 自动宽度 */
        }

        #Companys td {
            white-space: nowrap; /* 防止单元格内容换行 */
        }

        /* 按钮样式 */
        button {
            background-color: #4A4A4A; /* 按钮背景色 */
            color: white; /* 文字颜色 */
            border: none; /* 无边框 */
            padding: 10px 20px; /* 内边距 */
            margin: 10px 0; /* 外边距 */
            cursor: pointer; /* 鼠标手形 */
            border-radius: 5px; /* 圆角 */
            font-size: 16px; /* 字体大小 */
        }

        button:hover {
            background-color: #5A5A5A; /* 鼠标悬停时的背景色 */
        }
    </style>
    <!-- 修改信息 -->
    <style>
        #UserInfo {
            background: white;
            width: 100%;
            height: 780px;
            margin: 10px auto;
            padding: 5px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            display: none; /* 初始隐藏，可以通过JavaScript控制显示 */
        }

        #resume {
            height: 800px;
            border-collapse: collapse;
        }

        #resume th, #resume td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }

        #resume th {
            background-color: #f2f2f2;
            width: 100px;
        }

        #resume td[contenteditable="true"] {
            min-height: 50px; /* 确保有足够的空间进行编辑 */
        }

        #UserInfo button {
            padding: 10px;
            margin-top: 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
            background-color: #007bff;
            color: white;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        #UserInfo button:hover {
            background-color: #0056b3;
        }
    </style>
    <!-- 退出按钮 -->
    <style>
        #logoutButton {
            position: fixed;
            bottom: 10px;
            right: 10px;
            padding: 10px 20px;
            background-color: #e74c3c; /* 红色背景 */
            color: white; /* 白色文字 */
            border: none;
            border-radius: 5px; /* 圆角 */
            cursor: pointer; /* 鼠标手形 */
            font-size: 16px; /* 字体大小 */
            transition: background-color 0.3s; /* 过渡效果 */
        }

        #logoutButton:hover {
            background-color: #c0392b; /* 悬停时更深的红色 */
        }
    </style>
    <!--招刷不误-->
    <style>
        #Scroll {
            width: 100%;
            padding: 20px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        #container {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 20px;
        }

        .company {
            width: 300px;
            height: 400px;
            background-image: url("photo/640.jpg"); /* 设置统一背景图片 */
            background-size: cover;
            background-position: center;
            border: 1px solid #ccc;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            color: white;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
            cursor: pointer;
            position: relative; /* 为绝对定位的按钮提供定位上下文 */
        }

        .company h3 {
            margin: 0;
            font-size: 1.5em;
        }

        .company p {
            margin: 10px 0;
            font-size: 1em;
        }

        #nextButton {
            display: block;
            width: 100px;
            padding: 10px;
            background-color: #4A4A4A; /* 按钮背景色 */
            color: white; /* 文字颜色 */
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px; /* 字体大小 */
            transition: background-color 0.3s; /* 过渡效果 */
            position: absolute;
            bottom: 50px; /* 按钮位于框框下方 */
            left: 50%;
            transform: translateX(-50%); /* 水平居中 */
        }

        #nextButton:hover {
            background-color: #5A5A5A; /* 悬停时更深的背景色 */
        }
    </style>
    <!-- 查询公司按钮 -->
    <style>
        /* 调整表格宽度和字体大小 */
        #Companys {
            font-size: 12px; /* 缩小字体大小 */
            width: 100%; /* 宽度占满容器 */
        }

        #Companys th, #Companys td {
            padding: 8px; /* 减小内边距 */
        }

        /* 调整分页区域的布局 */
        .pagination {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px;
        }

        .pagination button {
            margin: 0 5px; /* 调整按钮间距 */
        }

        /* 调整查询表单的布局 */
        #searchForm {
            display: flex;
            flex-wrap: wrap;
            gap: 10px; /* 调整元素之间的间距 */
            margin-bottom: 20px; /* 增加表单与表格之间的间距 */
        }

        #searchForm label {
            margin-top: 10px; /* 调整标签间距 */
            flex: 1; /* 让标签和输入框平分空间 */
        }

        #searchForm input[type="text"], #searchForm button {
            flex: 2; /* 让输入框和按钮平分空间 */
        }

        /* 调整输入框和按钮的样式 */
        #searchForm input[type="text"] {
            width: calc(100% - 20px); /* 输入框宽度 */
            height: 10px;
            padding: 6px; /* 内边距 */
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 12px; /* 字体大小 */
        }


        #searchForm button {
            padding: 6px 12px; /* 内边距 */
            background-color: #4A4A4A; /* 按钮背景色 */
            color: white; /* 文字颜色 */
            border: none; /* 无边框 */
            border-radius: 5px; /* 圆角 */
            cursor: pointer; /* 鼠标手形 */
            font-size: 12px; /* 字体大小 */
            transition: background-color 0.3s; /* 过渡效果 */
        }
        #searchForm label {
            margin-top: 10px; /* 调整标签间距 */
            flex: 1; /* 让标签和输入框平分空间 */
            width: 100px; /* 固定标签宽度 */
            text-align: right; /* 标签文字右对齐 */
        }
        #searchForm button:hover {
            background-color: #5A5A5A; /* 悬停时更深的背景色 */
        }
    </style>
    <!--双向系统-->
    <style>
        .employment-table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }

        .employment-table th, .employment-table td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }

        .employment-table th {
            background-color: #f2f2f2;
            font-weight: bold;
        }

        .employment-table tbody tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        .employment-table tbody tr:hover {
            background-color: #f1f1f1;
        }
    </style>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }

        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
            min-height: 100vh;
            color: #333;
            overflow-x: hidden;
        }

        /* 顶部导航栏 */
        .top-nav {
            background: linear-gradient(120deg, #1a3a6c, #2c5282);
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 30px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            position: sticky;
            top: 0;
            z-index: 1000;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .logo i {
            font-size: 28px;
            color: #64b5f6;
        }

        .logo h1 {
            font-size: 1.8rem;
            font-weight: 600;
            background: linear-gradient(to right, #a1c4fd, #c2e9fb);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        .user-controls {
            display: flex;
            gap: 15px;
            align-items: center;
        }

        /* 侧边栏 */
        #sidebar {
            width: 260px;
            height: calc(100vh - 70px);
            background: linear-gradient(180deg, #2c3e50 0%, #1a2a3a 100%);
            color: white;
            position: fixed;
            left: -260px;
            top: 70px;
            transition: left 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            overflow: auto;
            box-shadow: 5px 0 15px rgba(0, 0, 0, 0.2);
            z-index: 900;
        }

        #sidebar.active {
            left: 0;
        }

        #sidebar ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }

        #sidebar ul li {
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        }

        #sidebar ul li a {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 20px 25px;
            color: #e0e0e0;
            text-decoration: none;
            font-size: 16px;
            transition: all 0.3s ease;
        }

        #sidebar ul li a i {
            font-size: 20px;
            width: 24px;
            text-align: center;
            color: #64b5f6;
        }

        #sidebar ul li a:hover {
            background: rgba(41, 128, 185, 0.3);
            color: white;
            padding-left: 30px;
        }

        /* 主内容区 */
        #content {
            margin-top: 70px;
            padding: 30px;
            transition: margin-left 0.4s;
        }

        #content.with-sidebar {
            margin-left: 260px;
        }


        .welcome-container h1 {
            font-size: 2.8rem;
            color: #1a3a6c;
            margin-bottom: 20px;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            background: linear-gradient(120deg, #1a3a6c, #2c5282);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .welcome-container p {
            font-size: 1.2rem;
            color: #455a64;
            max-width: 800px;
            margin: 0 auto;
            line-height: 1.7;
        }


        .module-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 1px solid #e0e0e0;
        }

        .module-header h2 {
            font-size: 1.8rem;
            color: #1a3a6c;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .module-header h2 i {
            color: #2196f3;
        }


        /* 动画 */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src=js/jquery.min.js></script>
    <script src=js/echarts.js></script>
</head>
<body>
<!-- 顶部导航栏 -->
<div class="top-nav">
    <div class="logo">
        <i class="fas fa-briefcase"></i>
        <h1>中南财经政法大学就业管理系统</h1>
    </div>

    <div class="user-controls">
        <button id="hamburger" class="btn btn-secondary">
            <i class="fas fa-bars"></i> 菜单
        </button>
        <button id="logoutButton" class="btn btn-danger">
            <i class="fas fa-sign-out-alt"></i> 退出
        </button>
    </div>
</div>
<div id="sidebar">
    <ul>
        <li><a href="#" onclick="">     </a></li>
        <li><a href="#" onclick="Data()">数据展示</a></li>
        <li><a href="#" onclick="Scroll()">招刷不误</a></li>
        <li><a href="#" onclick="Companies()">公司查询</a></li>
        <li><a href="#" onclick="Employee()">招聘发送与接受</a></li>
        <li><a href="#" onclick="Information()">个人求职信息</a></li>
    </ul>
</div>
<div id="content">
    <!-- 侧边栏中的选项 -->
    <div id="Data" style="display: none; width: 100%; height: 80vh; padding: 20px; box-sizing: border-box;">
        <h2 style="color: #005792; text-align: center; margin-bottom: 20px;">就业数据分析</h2>
        <div style="display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 20px; height: calc(100% - 60px);">
            <!-- 图表1：行业分布饼图 -->
            <div id="chart1" style="width: 100%; height: 100%; background: #f0f2f5; border-radius: 8px; padding: 10px; box-shadow: 0 2px 12px rgba(0,0,0,0.1);"></div>

            <!-- 图表2：城市就业柱状图 -->
            <div id="chart2" style="width: 100%; height: 100%; background: #f0f2f5; border-radius: 8px; padding: 10px; box-shadow: 0 2px 12px rgba(0,0,0,0.1);"></div>

            <!-- 图表3：趋势折线图 -->
            <div id="chart3" style="width: 100%; height: 100%; background: #f0f2f5; border-radius: 8px; padding: 10px; box-shadow: 0 2px 12px rgba(0,0,0,0.1);"></div>

            <!-- 图表4：企业类型雷达图 -->
            <div id="chart4" style="width: 100%; height: 100%; background: #f0f2f5; border-radius: 8px; padding: 10px; box-shadow: 0 2px 12px rgba(0,0,0,0.1);"></div>
        </div>
    </div>
    <!-- 招刷不误 -->
    <div id="Scroll" style="display: none;">
        <div id="container">
            <!-- 动态加载的公司数据将显示在这里 -->
        </div>
        <button id="nextButton">下一个</button>
    </div>
    <!-- 公司查询 -->
    <div id="records" style="display: none;">
        <form id="searchForm">
            <div style="display: flex; gap: 10px; flex-wrap: wrap;">
            <label for="companyNameInput">公司名称：</label>
            <input type="text" id="companyNameInput" name="name" placeholder="请输入公司名称">
            </div>
            <div style="display: flex; gap: 10px; flex-wrap: wrap;">
            <label for="companyNatureInput">公司性质：</label>
            <input type="text" id="companyNatureInput" name="nature" placeholder="请输入公司性质">
            </div>
            <div style="display: flex; gap: 10px; flex-wrap: wrap;">
            <label for="companyIndustryInput">所属行业：</label>
            <input type="text" id="companyIndustryInput" name="industry" placeholder="请输入所属行业">
            </div>
            <div style="display: flex; gap: 10px; flex-wrap: wrap;">
            <label for="companyProvinceInput">所在省份：</label>
            <input type="text" id="companyProvinceInput" name="province" placeholder="请输入所在省份">
            </div>
            <div style="display: flex; gap: 10px; flex-wrap: wrap;">
            <label for="companyCityInput">所在城市：</label>
            <input type="text" id="companyCityInput" name="city" placeholder="请输入所在城市">
            </div>
            <div style="display: flex; gap: 10px; flex-wrap: wrap;">
            </div>
            <button type="button" id="searchButton">查询公司信息</button>
        </form>
        <div id="companyInfo">
            <table id="Companys">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>公司名称</th>
                    <th>公司性质</th>
                    <th>所属行业</th>
                    <th>所在省份</th>
                    <th>所在城市</th>
                </tr>
                </thead>
                <tbody>
                <!-- 动态插入的行 -->
                </tbody>
            </table>
            <div class="pagination">
                <button id="prevPage">上一页</button>
                <span id="currentPage"></span>
                <button id="nextPage">下一页</button>
                <p>总页数：<span id="totalPages">1</span></p>
                <p>总记录数：<span id="totalRecords">0</span></p>
            </div>
        </div>
    </div>
    <!-- 邀请与发送 -->
    <div id="Employee" style="display: none;">
        <!-- 发送请求表单 -->
        <div id="SendRequestForm" style="margin-bottom: 20px;">
            <label for="employerName">公司名称：</label>
            <input type="text" id="employerName" name="employerName" placeholder="请输入公司名称">
            <button onclick="sendApplication()">发送申请</button>
        </div>
        <!-- 表格容器 -->
        <div id="TableContainer" style="display: flex; flex-direction: column; height: 100%;">
            <!-- 员工信息表格 -->
            <h1>应聘信息申请</h1>
            <div id="EmployeeInfo" style="flex: 64;">
                <table id="Employments1" class="employment-table">
                    <thead>
                    <tr>
                        <th>公司名称</th>
                        <th>发送时间</th>
                        <th>申请到期时间</th>
                        <th>申请状态</th>
                    </tr>
                    </thead>
                    <tbody>
                    <!-- 动态加载的数据将插入到这里 -->
                    </tbody>
                </table>
            </div>
            <!-- 雇主信息表格 -->
            <h1>招聘信息申请</h1>
            <div id="EmployerInfo" style="flex: 36;">
                <table id="Employments2" class="employment-table">
                    <thead>
                    <tr>
                        <th>公司名称</th>
                        <th>发送时间</th>
                        <th>邀请到期时间</th>
                        <th>邀请状态</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <!-- 动态加载的数据将插入到这里 -->
                    </tbody>
                </table>
            </div>
            <!-- 招聘记录表格 -->
            <h1>招聘信息记录</h1>
            <div id="Employments" style="flex: 36;">
                <table id="Employments3" class="employment-table">
                    <thead>
                    <tr>
                        <th>公司名称</th>
                        <th>邀请状态</th>
                    </tr>
                    </thead>
                    <tbody>
                    <!-- 动态加载的数据将插入到这里 -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!-- 个人求职信息 -->
    <div id="UserInfo" style="display: none;">
        <div class="module-header">
            <h2><i class="fas fa-user-tie"></i>个人求职信息</h2>
            <button onclick="saveResumeInfo()" class="btn btn-primary">
                <i class="fas fa-save"></i> 保存更改
            </button>
        </div>
        <table id="resume">
            <tr>
                <td id="resumeID" style="display: none"></td>
            </tr>
            <tr>
                <th>爱好特长</th>
                <td id="ahtc" contenteditable="true"></td>
            </tr>
            <tr>
                <th>个人技能</th>
                <td id="grjn" contenteditable="true"></td>
            </tr>
            <tr>
                <th>社会实践经历及任职情况</th>
                <td id="shsjjljrzqk" contenteditable="true"></td>
            </tr>
            <tr>
                <th>获奖及发表作品情况</th>
                <td id="hjjfbzpqk" contenteditable="true"></td>
            </tr>
            <tr>
                <th>主要科研活动和学术活动</th>
                <td id="zykyhdhxshd" contenteditable="true"></td>
            </tr>
            <tr>
                <th>个人自荐和求职意向</th>
                <td id="grzjhqzyx" contenteditable="true"></td>
            </tr>
            <!-- 新增的 AI 分析适合岗位 -->
            <tr>
                <th>AI 分析适合岗位</th>
                <td id="aiAnalysis" contenteditable="false"></td>
            </tr>
        </table>
    </div>
</div>
<script>
    document.getElementById('hamburger').addEventListener('click', function () {
        var sidebar = document.getElementById('sidebar');
        var content = document.getElementById('content');
        var isOpen = sidebar.classList.contains('active');
        if (isOpen) {
            sidebar.classList.remove('active');
            content.classList.remove('with-sidebar');
        } else {
            sidebar.classList.add('active');
            content.classList.add('with-sidebar');
        }
    });
    var DataContainer = document.getElementById('Data');
    var ScrollContainer = document.getElementById('Scroll');
    var CompaniesContainer = document.getElementById('records');
    var EmployeeContainer = document.getElementById('Employee')
    var InformationContainer = document.getElementById('UserInfo');
    var title = document.getElementById('title');


    function Data() {
        DataContainer.style.display = 'block';
        ScrollContainer.style.display = 'none';
        CompaniesContainer.style.display ='none';
        EmployeeContainer.style.display ='none';
        InformationContainer.style.display = 'none';
    }
    function Scroll() {
        DataContainer.style.display = 'none';
        ScrollContainer.style.display = 'block';
        CompaniesContainer.style.display ='none';
        EmployeeContainer.style.display ='none';
        InformationContainer.style.display = 'none';

        ScrollDisplay()
    }
    function Companies() {
        DataContainer.style.display = 'none';
        ScrollContainer.style.display = 'none';
        CompaniesContainer.style.display ='block';
        EmployeeContainer.style.display ='none';
        InformationContainer.style.display = 'none';
    }
    function Employee() {
        DataContainer.style.display = 'none';
        ScrollContainer.style.display = 'none';
        CompaniesContainer.style.display ='none';
        EmployeeContainer.style.display ='block';
        InformationContainer.style.display = 'none';
        // 调用函数，加载申请记录
        fetchApplications();
        fetchInvitations();
        fetchRecords()
    }
    function Information() {
        DataContainer.style.display = 'none';
        ScrollContainer.style.display = 'none';
        CompaniesContainer.style.display ='none';
        EmployeeContainer.style.display ='none';
        InformationContainer.style.display = 'block';
        fetchResumeDisplay()
    }

    // 定义从后端获取公司数据并显示的函数
    // 获取页面元素
    const Container = document.getElementById('container');
    const NextButton = document.getElementById('nextButton');

    // 初始化状态
    let companies = [];
    let currentIndex = 0;
    const batchSize = 5;

    function ScrollDisplay() {
        fetchCompanies();
        // 初始化显示第一个公司
        displayCurrentCompany();
    }

    // 定义从后端获取公司数据的函数
    function fetchCompanies() {
        return fetch('/zuel/company/getRandom')
            .then(response => response.json())
            .then(data => {
                companies = companies.concat(data.data); // 将新获取的数据添加到现有数据中
            })
            .catch(error => {
                console.error('Error fetching data:', error);
            });
    }

    // 定义显示当前公司的函数
    function displayCurrentCompany() {
        // 清空容器内容
        Container.innerHTML = '';

        // 如果没有更多数据，加载更多
        if (currentIndex >= companies.length) {
            fetchCompanies().then(() => {
                if (currentIndex >= companies.length) {
                    Container.innerHTML = '<p>没有更多数据了。</p>';
                    return;
                }
                displayCurrentCompany();
            });
            return;
        }

        // 获取当前公司数据
        const company = companies[currentIndex];
        const companyDiv = document.createElement('div');
        // 确保company.website是一个完整的URL
        if (!company.website.startsWith('http')) {
            company.website = 'https://' + company.website; // 添加协议头
        }
        companyDiv.className = 'company';
        companyDiv.innerHTML = `
        <h3>${company.name}</h3>
        <p><a href="${company.website}" target="_blank">${company.website}</a></p>
    `;
        Container.appendChild(companyDiv);
    }

    // 定义“下一个”按钮的点击事件
    NextButton.addEventListener('click', () => {
        currentIndex++;
        displayCurrentCompany();
    });


    //公司分页
    document.addEventListener('DOMContentLoaded', () => {
        const searchButton = document.getElementById('searchButton');
        if (searchButton) {
            searchButton.addEventListener('click', () => {
                fetchCompaniesWithFilters(currentPage);
            })
        } else {
            console.error("Search button not found. Please check the ID.");
        }
    });
    let currentPage = 1; // 当前页码
    let totalPages = 1; // 总页数
    let totalRecords = 0; // 总记录数

    function fetchCompaniesWithFilters(page) {
        // 获取每个输入框的值
        const name = document.getElementById('companyNameInput').value.trim();
        const nature = document.getElementById('companyNatureInput').value.trim();
        const industry = document.getElementById('companyIndustryInput').value.trim();
        const province = document.getElementById('companyProvinceInput').value.trim();
        const city = document.getElementById('companyCityInput').value.trim();

        // 构造查询参数
        const queryParams = new URLSearchParams({
            name: name || "",
            nature: nature || "",
            industry: industry || "",
            province: province || "",
            city: city || "",
            limit: 10,
            page: page || 1 // 默认第一页
        });

        // 发送请求
        fetch(`/zuel/company/list?${queryParams}`, {
            method: 'GET', // 使用 GET 方法
            headers: {
                'Content-Type': 'application/json' // 设置请求头为 JSON
            }
        })
            .then(response => response.json())
            .then(data => {
                const recordsTableBody = document.getElementById('Companys').querySelector('tbody');
                recordsTableBody.innerHTML = ''; // 清空现有记录

                data.records.forEach(company => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                <td>${company.id}</td>
                <td>${company.name}</td>
                <td>${company.nature}</td>
                <td>${company.industry}</td>
                <td>${company.province}</td>
                <td>${company.city}</td>
            `;
                    recordsTableBody.appendChild(row);
                });

                // 更新分页信息
                currentPage = data.current || 1;
                totalPages = data.pages || 1;
                totalRecords = data.total || 0;

                // 更新分页信息显示
                document.getElementById('currentPage').textContent = currentPage;
                document.getElementById('totalPages').textContent = totalPages;
                document.getElementById('totalRecords').textContent = totalRecords;

                // 更新按钮状态
                document.getElementById('prevPage').disabled = currentPage <= 1;
                document.getElementById('nextPage').disabled = currentPage >= totalPages;
            })
            .catch(error => {
                console.error('Error fetching companies:', error);
            });
    }

    // 初始化分页按钮事件
    document.getElementById('prevPage').addEventListener('click', () => {
        if (currentPage > 1) {
            fetchCompaniesWithFilters(currentPage - 1);
        }
    });

    document.getElementById('nextPage').addEventListener('click', () => {
        if (currentPage < totalPages) {
            fetchCompaniesWithFilters(currentPage + 1);
        }
    });



    /*求职意向*/
    function fetchResumeDisplay() {
        fetch(`/zuel/studentResume/get`, {
            method: 'GET', // 假设获取简历信息是GET请求
            headers: {
                'Content-Type': 'application/json',
            },
        })
            .then(response => response.json())
            .then(data => {
                console.log('Success:', data);
                const resumeData = data.data; // 后端返回的数据在data字段中
                // 填充页面上的字段
                document.getElementById('resumeID').textContent = resumeData.id;
                document.getElementById('ahtc').textContent = resumeData.ahtc || '';
                document.getElementById('grjn').textContent = resumeData.grjn || '';
                document.getElementById('shsjjljrzqk').textContent = resumeData.shsjjljrzqk || '';
                document.getElementById('hjjfbzpqk').textContent = resumeData.hjjfbzpqk || '';
                document.getElementById('zykyhdhxshd').textContent = resumeData.zykyhdhxshd || '';
                document.getElementById('grzjhqzyx').textContent = resumeData.grzjhqzyx || '';
                document.getElementById('aiAnalysis').textContent = resumeData.aiAnalysis || '暂无 AI 分析结果'; // 新增这行代码
            })
            .catch(error => console.error('Error:', error));
    }
    function saveResumeInfo() {
        const userInfo = {
            id: document.getElementById('resumeID').textContent,
            ahtc: document.getElementById('ahtc').textContent,
            grjn: document.getElementById('grjn').textContent,
            shsjjljrzqk: document.getElementById('shsjjljrzqk').textContent,
            hjjfbzpqk: document.getElementById('hjjfbzpqk').textContent,
            zykyhdhxshd: document.getElementById('zykyhdhxshd').textContent,
            grzjhqzyx: document.getElementById('grzjhqzyx').textContent,
        };
        fetch('/zuel/studentResume/update', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(userInfo),
        })
            .then(response => response.json())
            .then(data => console.log('Success:', data))
            .catch(error => console.error('Error:', error));
        fetchResumeDisplay()
    }
    function logout() {
        // 发送请求到后端以清空session
        fetch('/zuel/logout', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            // 可以发送一个空的JSON对象或者什么都不发送
            body: JSON.stringify({}),
        })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    // 显示成功消息
                    alert(data.message); // 或者使用其他方式显示消息，比如在页面上显示
                    window.location.href = 'login.html'; // 重定向到登录页面或首页
                } else {
                    // 处理错误情况
                    alert(data.message);
                }
            })
            .catch(error => {
                console.error('Error logging out:', error);
            });
    }
    // 设置退出按钮的点击事件
    document.getElementById('logoutButton').addEventListener('click', logout);
</script>
<!--双向-->
<script>
    // 状态映射
    const stateMap = {
        0: '雇主未同意',
        1: '雇员未同意',
        2: '双方已同意'
    };
    function sendApplication() {
        const userInfo = {
            employerName: document.getElementById('employerName').value,
        };
        fetch('/zuel/employment/add', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(userInfo),
        })
            .then(response => response.json())
            .then(data => {
                if (data.code===200) {
                    alert('申请发送成功！');
                    fetchApplications()
                    fetchRecords()
                } else {
                    alert('申请发送失败：' + data.message);
                }
            })
            .catch(error => {
                alert('申请发送失败：' + error.message);
            });

    }
    // 函数：获取当前申请记录
    function fetchApplications() {
        // 获取tbody元素
        const tbody = document.querySelector('#Employments1 tbody');
        // 清空现有记录
        tbody.innerHTML = '';

        // 发送GET请求到后端获取申请记录
        fetch('/zuel/employment/list1', {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
            },
        })
            .then(response => response.json())
            .then(data => {
                // 遍历返回的数据，动态创建表格行
                data.records.forEach(employment => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                    <td>${employment.employerName}</td>
                    <td>${employment.createTime}</td>
                    <td>${getExpiryTime(employment.createTime)}</td>
                    <td>${stateMap[employment.state] || '未知状态'}</td>
                `;
                    tbody.appendChild(row);
                });
            })
            .catch(error => {
                console.error('Error fetching applications:', error);
            });
    }
    function fetchInvitations() {
        // 获取tbody元素
        const tbody = document.querySelector('#Employments2 tbody');
        // 清空现有记录
        tbody.innerHTML = '';

        // 发送GET请求到后端获取邀请记录
        fetch('/zuel/employment/list2', {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
            },
        })
            .then(response => response.json())
            .then(data => {
                // 遍历返回的数据，动态创建表格行
                data.records.forEach(employment => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                <td>${employment.employerName}</td>
                <td>${employment.createTime}</td>
                <td>${getExpiryTime(employment.createTime)}</td>
                <td>${stateMap[employment.state] || '未知状态'}</td>
                <td><button class="agree-btn" data-id="${employment.id}" data-state="${employment.state}">同意</button></td>
            `;
                    tbody.appendChild(row);
                });

                // 为tbody添加事件委托
                tbody.addEventListener('click', (event) => {
                    if (event.target.classList.contains('agree-btn')) {
                        agreeInvitation(event.target.dataset.id, event.target.dataset.state);
                    }
                });
            })
            .catch(error => {
                console.error('Error fetching invitations:', error);
            });
    }
    function agreeInvitation(invitationId, state) {
        const userInfo = {
            id: parseInt(invitationId, 10),
            state: parseInt(state, 10)
        };
        fetch(`/zuel/employment/agree`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(userInfo),
        })
            .then(response => response.json())
            .then(data => {
                if (data.code === 200) {
                    alert('邀请已同意！');
                    fetchInvitations(); // 刷新邀请列表
                } else {
                    alert('同意邀请失败：' + data.message);
                }
            })
            .catch(error => {
                alert('同意邀请失败：' + error.message);
            });
        fetchRecords()
    }
    function fetchRecords() {
        // 获取tbody元素
        const tbody = document.querySelector('#Employments3 tbody');
        // 清空现有记录
        tbody.innerHTML = '';

        // 发送GET请求到后端获取申请记录
        fetch('/zuel/employment/list3', {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
            },
        })
            .then(response => response.json())
            .then(data => {
                // 遍历返回的数据，动态创建表格行
                data.records.forEach(employment => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                    <td>${employment.employerName}</td>
                    <td>${stateMap[employment.state] || '未知状态'}</td>
                `;
                    tbody.appendChild(row);
                });
            })
            .catch(error => {
                console.error('Error fetching applications:', error);
            });
    }
    // 函数：计算申请到期时间
    function getExpiryTime(createTime) {
        // 解析createTime为Date对象
        const createTimeDate = new Date(createTime);

        // 计算一周后的时间
        const expiryTime = new Date(createTimeDate.getTime() + 7 * 24 * 60 * 60 * 1000);

        // 格式化日期为 YYYY-MM-DD HH:MM:SS
        const pad = (number) => number.toString().padStart(2, '0');
        const year = expiryTime.getFullYear();
        const month = pad(expiryTime.getMonth() + 1); // 月份从0开始，需要加1
        const day = pad(expiryTime.getDate());
        const hours = pad(expiryTime.getHours());
        const minutes = pad(expiryTime.getMinutes());
        const seconds = pad(expiryTime.getSeconds());

        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    }

</script>
<!--图表-->
<script>
    // 等待页面完全加载后初始化图表
    document.addEventListener('DOMContentLoaded', function() {
        // 初始化图表函数
        function initCharts() {
            // 确保数据大屏区域已显示时再初始化图表
            const dataContainer = document.getElementById('Data');
            if (dataContainer.style.display === 'none') {
                // 给数据展示按钮添加点击事件监听，显示时初始化
                document.querySelectorAll('a[onclick="Data()"]')[0].addEventListener('click', function() {
                    setTimeout(initCharts, 300); // 延迟300ms确保DOM更新完成
                });
                return;
            }

            // 初始化图表
            const chart1 = echarts.init(document.getElementById('chart1'));

            // 从后端获取数据
            fetch('/zuel/chart/chart1')
                .then(response => response.json())
                .then(data => {
                    // 假设后端返回的数据格式是 [{name: '金融业', value: 25.41}, ...]
                    const industryData = data.map(item => ({
                        name: item.name,
                        value: item.value
                    }));

                    // 将图例数据分成两部分
                    const midIndex = Math.ceil(industryData.length / 2);
                    const leftLegendData = industryData.slice(0, midIndex).map(item => item.name);
                    const rightLegendData = industryData.slice(midIndex).map(item => item.name);

                    // 设置图表选项
                    chart1.setOption({
                        title: { text: '就业行业分布', left: 'center' },
                        tooltip: { trigger: 'item' },
                        legend: [
                            {
                                orient: 'vertical',
                                left: 'left',
                                top: 'center',
                                data: leftLegendData
                            },
                            {
                                orient: 'vertical',
                                right: 'right',
                                top: 'center',
                                data: rightLegendData
                            }
                        ],
                        series: [{
                            name: '行业占比(%)',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            label: { show: false, position: 'center' },
                            emphasis: {
                                label: { show: true, fontSize: 16, fontWeight: 'bold' }
                            },
                            labelLine: { show: false },
                            data: industryData
                        }]
                    });
                })
                .catch(error => {
                    console.error('Error fetching data:', error);
                });






            // 图表2：地区就业柱状图（基于Data.csv中的地区数据）
            const chart2 = echarts.init(document.getElementById('chart2'));

            fetch('/zuel/chart/chart2')
                .then(response => response.json())
                .then(regionData => {
                    const chart2 = echarts.init(document.getElementById('chart2'));
                    chart2.setOption({
                        title: { text: '就业城市分布', left: 'center' },
                        tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
                        grid: { left: '5%', right: '5%', bottom: '5%', containLabel: true },
                        xAxis: {
                            type: 'category',
                            data: regionData.name,
                            axisLabel: { rotate: 30, interval: 0 }
                        },
                        yAxis: { type: 'value', name: '人数' },
                        series: [{
                            name: '就业人数',
                            type: 'bar',
                            data: regionData.value,
                            itemStyle: {
                                color: function (params) {
                                    const colorList = ['#5470C6', '#91CC75', '#FAC858', '#EE6666', '#73C0DE', '#3BA272', '#FC8452'];
                                    return colorList[params.dataIndex % colorList.length];
                                }
                            }
                        }]
                    });
                })
                .catch(error => console.error('加载图表2数据失败:', error));






            // 图表3：行业就业人数增长率折线图
            const chart3 = echarts.init(document.getElementById('chart3'));
            fetch('zuel/chart/chart3')
                .then(res => res.json())
                .then(industryGrowthData => {
                    const chart3 = echarts.init(document.getElementById('chart3'));

                    chart3.setOption({
                        title: { text: '行业就业人数增长率(%)', left: 'center' },
                        tooltip: {
                            trigger: 'axis',
                            formatter: '{b}年<br/>{a}：{c}%'
                        },
                        legend: {
                            data: Object.keys(industryGrowthData).filter(k => k !== 'year'),
                            selected: {
                                '金融业': true,
                                '制造业': true,
                                '信息传输、软件、和信息技术服务业': true,
                                '科学研究和技术服务业': false,
                                '租赁产业和商务服务产业': false,
                                '采矿业': false,
                                '交通运输、仓储和邮政业': false,
                                '住宿和餐饮业': false,
                                '公共管理、社会保障和社会组织': false,
                                '军队': false,
                                '农、林、牧、渔业': false,
                                '卫生和社会工作': false,
                                '居民服务、修理和其他服务业': false,
                                '建筑业': false,
                                '房地产业': false,
                                '批发和零售业': false,
                                '教育': false,
                                '文化、体育和娱乐业': false,
                                '水利、环境和公共设施管理业': false,
                                '电力、热力、燃气、及水生产和供应业': false,
                            },
                            top: 30
                        },
                        grid: { left: '5%', right: '5%', bottom: '5%', containLabel: true },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: industryGrowthData.year
                        },
                        yAxis: {
                            type: 'value',
                            name: '增长率(%)',
                            min: -100,
                            max: 100,
                            interval: 10
                        },
                        series: Object.keys(industryGrowthData)
                            .filter(k => k !== 'year')
                            .map((industryName, idx) => ({
                                name: industryName,
                                type: 'line',
                                data: industryGrowthData[industryName],
                                smooth: true,
                                symbol: 'circle',
                                symbolSize: 8,
                                lineStyle: { width: 3 },
                                itemStyle: { }
                            }))
                    });
                });


            /*图4*/
            const chart4 = echarts.init(document.getElementById('chart4'));

            fetch('zuel/chart/chart4')
                .then(res => res.json())
                .then(data => {
                    if (!data || data.length === 0) {
                        console.error("数据为空");
                        return;
                    }

                    // 将数据拆分为指标数组和对应值数组
                    const indicators = data.map(item => ({
                        name: item.name,
                        max: 100 // 设定最大值为100，方便雷达图统一展示比例
                    }));

                    const values = data.map(item => item.value);

                    chart4.setOption({
                        title: {
                            text: '就业率最高的学院统计(%)',
                            left: 'center',
                            top: 10
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        radar: {
                            indicator: indicators,
                            shape: 'polygon',
                            splitNumber: 5,
                            radius: '65%',
                            center: ['50%', '60%'],
                            axisName: {
                                color: '#333',
                                fontSize: 12
                            },
                            splitArea: {
                                areaStyle: {
                                    color: ['#f5f5f5', '#e0e0e0'] // 分区颜色交替
                                }
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#aaa'
                                }
                            },
                            splitLine: {
                                lineStyle: {
                                    color: '#ccc'
                                }
                            }
                        },
                        series: [{
                            name: '就业率',
                            type: 'radar',
                            data: [{
                                value: values,
                                name: '就业率'
                            }],
                            areaStyle: {
                                color: 'rgba(24, 144, 255, 0.3)'
                            },
                            lineStyle: {
                                color: 'rgba(24, 144, 255, 0.8)',
                                width: 2
                            },
                            symbol: 'circle',
                            symbolSize: 6,
                            itemStyle: {
                                color: '#1890ff'
                            }
                        }]
                    });
                })
                .catch(error => console.error('There was a problem with the fetch operation:', error));



            // 窗口大小变化时重绘图表
            window.addEventListener('resize', function() {
                chart1.resize();
                chart2.resize();
                chart3.resize();
                chart4.resize();
            });
        }

        // 初始调用一次（如果数据大屏默认显示）
        initCharts();
    });
</script>
</body>
</html>